<!-- 模态弹窗 -->
<template>
  <div
    class="self-modal"
    v-show='showModal'
    v-bind:style="styleObj"
  >
    <!-- 自定义内容 -->
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "selfModal",
  data() {
    return {
      showModal: false
    };
  },
  props: {
    styleObj: {
      // 用于承接样式类
      type: Object,
      default: function() {
        return {
          position: "fixed",
          bottom: 0,
          top: 0,
          left: 0,
          width: "100%",
          background: "rgba(113,111,111,0.5)"
        };
      }
    }
  },
  methods: {
    // 确定
    sureClick() {
      this.showModal = true;
      return new Promise(
        function(resolve) {
          resolve("sure");
        },
        function(reject) {}
      );
    },
    // 取消
    cancelClick() {
      this.showModal = false;
      return new Promise(
        function(resolve) {
          resolve("cancel");
        },
        function(reject) {}
      );
    }
  }
};
</script>
<style scoped lang='less'>
.self-modal {
  z-index: 3000;
}
</style>